﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .yellow {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <input type="text" id="txtUserName" name="name" value="" />
    <input type="password" id="pwdUserPassword" name="name" value="" />
    <input type="button" id="btnLogin" name="name" value="登录" />
    <script>
        String.prototype.format = function(args) {
            var result = this;
            if (arguments.length > 0) {
                if (arguments.length == 1 && typeof (args) == "object") {
                    for (var key in args) {
                        if(args[key]!=undefined){
                            var reg = new RegExp("({" + key + "})", "g");
                            result = result.replace(reg, args[key]);
                        }
                    }
                }
                else {
                    for (var i = 0; i < arguments.length; i++) {
                        if (arguments[i] != undefined) {
                            var reg= new RegExp("({)" + i + "(})", "g");
                            result = result.replace(reg, arguments[i]);
                        }
                    }
                }
            }
            return result;
        }

        btnLogin = document.querySelector('#btnLogin');
        btnLogin.onclick = function () {
            txtUserName = document.querySelector('#txtUserName');
            pwdUserPassword = document.querySelector('#pwdUserPassword');
            userName = txtUserName.value;
            userPassword = pwdUserPassword.value;
            console.log('userName: {0} userPassword: {1}'.format(userName, userPassword));
            if (userName.length < 3 || userName.length > 6) {
                txtUserName.className = 'yellow';
            } else {
                txtUserName.className = '';
            }
        }
    </script>
</body>
</html>